<template>
  <!-- 椭圆 -->
  <div class="form">
    <div class="inputBox">
      <label for="">cx</label>
      <input type="text" v-model="cx" />
    </div>
    <div class="inputBox">
      <label for="">cy</label>
      <input type="text" v-model="cy" />
    </div>
    <div class="inputBox">
      <label for="">rx</label>
      <input type="text" v-model="rx" />
    </div>
    <div class="inputBox">
      <label for="">ry</label>
      <input type="text" v-model="ry" />
    </div>
    <div class="inputBox">
      <label for="">fill</label>
      <input type="color" v-model="fill" />
    </div>
    <div class="inputBox">
      <label for="">strokeColor</label>
      <input type="color" v-model="stroke" />
    </div>
    <div class="inputBox">
      <label for="">strokeWidth</label>
      <input type="text" name="" v-model="strokeWidth" />
    </div>
    <div class="inputBox">
      <button @click="addEllipse">addEllipse</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRaw, toRefs } from "vue";
import * as d3 from "d3";
import { ellipseDrawAdd } from "../../util/geoDrawAdd.js";
export default {
  setup() {
    const ellipse = reactive({
      cx: 300,
      cy: 80,
      rx: 100,
      ry: 50,
      fill: "#000",
      stroke: "#000",
      strokeWidth: 4,
    });

    function addEllipse() {
      const geo = {};
      Object.assign(geo, toRaw(ellipse));
      ellipseDrawAdd(geo);
    }

    return { ...toRefs(ellipse), addEllipse };
  },
};
</script>
<style lang="scss" scoped>
.pointsText {
  width: 70px;
  height: 100px;
  resize: none;
}
</style>